<template>

    <div class="ly-artilce-detail">
        <el-page-header style="margin-bottom: 20px" @back="$router.go(-1)"></el-page-header>
        <div class="article-core">
            <div class="article-head">
                <div class="article-title">
                    {{article.title}}
                </div>
                <div class="baseInfo">
                    <span class="fa fa-user" aria-hidden="true"
                          title="作者/来源">&nbsp;{{article.author}}</span>
                    <span class="fa fa-tag" aria-hidden="true" title="标签" v-if="article.labelName">
                        <el-link class="detail-tag" v-for="(tag,index) in (article.labelName.split(','))"
                                 @click="$router.push({path: '/label', query: {id: tag.split('-')[0], name: tag.split('-')[1]}})">
                            {{tag.split('-')[1]}}{{index+1 != article.labelName.split(',').length?'|':''}}
                        </el-link>
                    </span>
                    <span class="fa fa-calendar" aria-hidden="true"
                          title="上传时间">
                        &nbsp;{{formatDate(article.createTime)}}
                    </span>
                    <span class="fa fa-eye" aria-hidden="true"
                          title="浏览次数">&nbsp;{{article.watchTime}}</span>
                </div>
            </div>
            <hr>
            <div class="article-content">
                <p v-html="articleChapter.content || '暂无内容'"></p>
            </div>
        </div>


        <div class="ly-page">
            <el-pagination
                    small
                    layout="total, prev, pager, next, jumper"
                    @current-change="refreshPageRequest"
                    :current-page="pageIndex"
                    :page-size="pageSize"
                    :total="totalPage"
                    :hide-on-single-page="pageHideSingle">
            </el-pagination>
        </div>

        <div class="article-over-page-left" :style="{visibility:pageHideSingle?'hidden':'visible'}">
            <div><el-button  size="mini" @click="pageOver(pageIndex - 1)" :disabled="pageIndex === 1">上</el-button></div>
            <br/>
            <div><el-button  size="mini" @click="pageOver(pageIndex + 1)" :disabled="pageIndex === totalPage">下</el-button></div>
        </div>

        <div class="article-over-page-right" :style="{visibility:pageHideSingle?'hidden':'visible'}">
            <div><el-button  size="mini" @click="pageOver(pageIndex - 1)" :disabled="pageIndex === 1">上</el-button></div>
            <br/>
            <div><el-button  size="mini" @click="pageOver(pageIndex + 1)" :disabled="pageIndex === totalPage">下</el-button></div>
        </div>

        <div class="ly-artilce-detail-issue">
            <hr>
            <h3>评论区</h3>
            <issue-component :content-id="article.id" :type="1" ref="issueComponentRef"></issue-component>
        </div>

    </div>

</template>

<script>
    //引入时间转换
    import {formatDate} from "@/utils/mixin.js"
    import issueComponent from "@/components/issue/issueComponent"

    export default {
        data() {
            return {
                filters: {
                    label: ''
                },
                articleChapter: {},

                pageIndex: 1,
                pageSize: 1,
                totalPage: 0,

                article:{},

                pageHideSingle:true,
            }
        },
        components:{issueComponent},
        watch: {
            $route: 'findArticleInfoById',
        },
        methods: {
            findArticleInfoById() {
                if(!this.$route.query.id) return; //每次路由跳转都会调用，涉及其他的路由调用undefined问题规避
                this.article = {};
                this.$api.Info.showInfo(this.$route.query.id).then(data => {
                    if (data && data.code === 0) {
                        this.article = data.showInfo;
                        this.findChapterByArticleId();
                        if(this.$refs['issueComponentRef']) {
                            this.$refs['issueComponentRef'].findIssueListAddDelay();
                        }
                    } else {
                        this.article = {};
                    }
                });
            },

            // 获取分页数据
            findChapterByArticleId:function() {
                this.articleChapter = {};
                window.scrollTo(0,0); //跳转首行

                this.$api.Chapter.listShow({
                    'page': this.pageIndex,
                    'limit': this.pageSize,
                    'infoId': this.article.id,
                }).then((data) => {
                    if (data && data.code === 0) {
                        if (data.page.list && data.page.list.length > 0) {
                            this.articleChapter = data.page.list[0];
                        }
                        this.totalPage = data.page.totalCount
                    } else {
                        this.articleChapter = {};
                        this.totalPage = 0
                    }
                    this.pageHideSingle = (this.totalPage == 0 || this.totalPage == 1)
                })
            },
            refreshPageRequest(pageIndex){
                this.pageIndex = pageIndex
                this.findChapterByArticleId();
            },
            pageOver(pageIndex){
                if(pageIndex == 0 ||pageIndex == this.totalPage+1 ){
                    return;
                }
                this.pageIndex = pageIndex;
                this.findChapterByArticleId();
            }
        },
        created(){
            this.findArticleInfoById();
        },
        // mixins: [ this.formatDate ]

    }
</script>

<style scoped>


    /*文章全部内容*/
    .ly-artilce-detail {
        padding: 10px;
        overflow: hidden;
    }

    /*文章核心内容*/
    .article-core{
        background-image: url("~@/assets/article/readBgImage.jpg");
    }

    /* 文章头部 */
    .article-head{
        text-align: center;
    }
    .article-title{
        font-size: 20px;
        font-weight: bold;
        padding: 10px 0px;
    }
    /* 文章信息 */
    .baseInfo span{
        margin: 5px 20px;
    }

    .article-over-page-left{
        position: fixed;
        left: 0px;
        top:45%;
    }

    .article-over-page-right{
        position: fixed;
        right: 0px;
        top:45%;
    }

    .article-content{
        padding: 15px;
    }

</style>